<%--
  Created by IntelliJ IDEA.
  User: zhouz
  Date: 2023/12/4
  Time: 15:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%--输入名字，当失去焦点时判断：name值为zhangsan则认为则显示”此用户已占用”，输入其他名字则显示“此用户可以使用”--%>

请输入名称：<input type="text" name="name" id="name"><span id="info"></span>
<button id="check">检测</button>


<script type="text/javascript">

    let checkButton = document.getElementById("check");

    checkButton.onclick = function () {

        let nameInput = document.getElementById("name");
        // 1. 创建XMLHttpRequest对象
        let xmlHttp = new XMLHttpRequest();

        /**
         * 2. 调用open函数
         * 第一个参数：提交方式：GET | POST
         * 第二个参数：url地址
         * 第三个参数：true:异步，false:同步
         *
         */
        let url = "${pageContext.request.contextPath}/ajax/check";
        xmlHttp.open("POST", url, true);

        // 3. 注册回调
        xmlHttp.onreadystatechange = function (resp) {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                let infoSpan = document.getElementById("info");
                // console.log(resp)

                // data '{"flag":"false","message": ""}'
                let data = resp.srcElement.responseText;
                // JSON格式字符串解析成JSON对象
                let jsonObject = JSON.parse(data);
                infoSpan.innerHTML = jsonObject.message;
            }
        };

        // 4. 当请求为POST请求时，还需要设置请求头
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        // 4. 真正发送请求 提交方式是POST请求，send()内部需要传参数
        // xmlHttp.send({name: nameInput.value});
        // send()参数可以是以下三种：
        // 1. Document, 在这种情况下，它在发送之前被序列化。
        // 2. XMLHttpRequestBodyInit即Blob, BufferSource, FormData, URLSearchParams, 或者 USVString 对象。
        // 3. null
        xmlHttp.send("name=" + nameInput.value);
    };


</script>

</body>
</html>
